<!DOCTYPE html>
<!-- saved from url=(0050)http://www.jq22.com/demo/mobileSelect201707092236/ -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>mobileSelect Demo</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="">  
    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="public.css">

    <link rel="stylesheet" type="text/css" href="mobileSelect.css">
    <script src="mobileSelect.js" type="text/javascript"></script>
    <script src="jquery-1.11.3.js" type="text/javascript"></script>
    <script src="json_adress.js" type="text/javascript"></script>

</head>
<body>


<div class="contain">
    <div class="fixWidth">
        <div class="demo">
            <input id="demo2" placeholder="请选择地址" readonly="readonly" onfocus="this.blur()" areaid="" style="cursor: pointer;width: 100%; line-height: 50px;">
        </div>
    </div>

</div>



<script type="text/javascript">
    var province=AddressInfo['Provinces'];
    var Cities=AddressInfo['Cities'];
    var Districts=AddressInfo['Districts'];
    var all_json_arr=[];
    for(var x=0;x<province.length;x++){
        var _provicename=province[x]._provicename;
        var _provincecode=province[x]._provincecode;
        var _proviceid=province[x]._proviceid;
        var city_arr=[];
        for(var h=0;h<Cities[_proviceid].length;h++){
            var _cityname=Cities[_proviceid][h]._cityname;
            var _citycode=Cities[_proviceid][h]._citycode;
            var _cityid=Cities[_proviceid][h]._cityid;
            var districts_arr=[];
            for(var y=0;y<Districts[_cityid].length;y++){
                var _districtname=Districts[_cityid][y]._districtname;
                var _districtcode=Districts[_cityid][y]._districtcode;
                var _cityid=Districts[_cityid][y]._cityid;
                var districts_json={id:_districtcode,value:_districtname};
                districts_arr.push(districts_json)
            }
            var city_json=
                    {id:_citycode,value:_cityname,
                    childs:districts_arr
                    };
            city_arr.push(city_json)
        }
        var all_json=
        {
            id:_provincecode,
            value:_provicename,
            childs:city_arr,
        };
        all_json_arr.push(all_json);
    }
    var mobileSelect = new MobileSelect({
    trigger: '#demo2',
    title: '地区选择',
    wheels: [
        {data:all_json_arr}
    ],
    transitionEnd:function(indexArr, data){
        var len=data.length;
        var value=[];
        var id=[];
        for(var z=0;z<len;z++){
            value.push(data[z].value);
            id.push(data[z].id);
        }
        $("#demo2").val(value);
        $("#demo2").attr("areaid",id);

    },
    callback:function(indexArr, data){
        var len=data.length;
        var value=[];
        var id=[];
        for(var z=0;z<len;z++){
            value.push(data[z].value);
            id.push(data[z].id);
        }
        $("#demo2").val(value);
        $("#demo2").attr("areaid",id);
    }
});


</script>





</body></html>